<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				activities: []
			}
		},
		mounted() {
			// this.$nextTick(() => {
			// 	this.list()
			// })
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			async list() {
				let parm = {
					"batNo": "",
					"beginTime": "",
					"endTime": "",
					"pageIndex": 1,
					"pageSize": 15,
					"typeList": ['0','1','2','3','4']
				}
				let result = await list(parm);
				//console.log("返回结果", result.data.list);
				let lists = result.data.list;
				lists.forEach(item => {
					switch (item.type) {
						case 0:
							item.typename = "过充";
							break;
						case 1:
							item.typename = "过放";
							break;
						case 2:
							item.typename = "过温";
							break;
						case 3:
							item.typename = "过流";
							break;
						case 4:
							item.typename = "短路";
							break;
					}
					item.types = 'primary';
					item.size = "large";
					item.color = "red";
					item.icon = 'el-icon-warning';
				})
				this.activities = lists;
				this.initChart();
			},
			initChart() {
				let that = this;
				let seriesList = [];
				var yarr = [];
				var linearr = [];
				var linev = {
					value: -0,
					symbol: 'none'
				};
				that.activities.map((item, index) => {
					seriesList.push({
						date: item.beginTime,
						title: item.typename,
						country: item.batNo,
						content: item.remark,
						value: 0,
						label: {
							show: true,
							lineHeight: 20,
							align: index % 2 == 0 ? 'left' : 'right',
							padding: 20,
							position: index % 2 == 0 ? 'left' : 'right',
							formatter: function(params) {
								return `{bolder|${params.name}}\n${params.data.title}\t\t\t说明：${params.data.content}`;
							},
							rich: {
								bolder: {
									fontWeight: 700,
									color: '#F5222D',
								},
							},
						},
					});
				});
				seriesList.map((item, index) => {
					linearr.push({
						value: -0,
					});
					yarr.push(`${item.date}  ${item.country}`);
				});
				this.chart = echarts.init(this.$el, 'macarons')
				this.chart.setOption({
					title: {
					    text: '报警信息',
					    textStyle: {
					        fontSize: 12,
					        fontWeight: 400
					    },
					    left: 'center',
					    top: '1%'
					},
					grid: {
						top: '10%',
						left: '50%',
						right: '30%',
						bottom: 0,
					},
					legend: {
						bottom: 0,
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							padding: [2, 0, 0, 0],
						},
					},
					xAxis: {
						show: false,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						},
						min: 0,
						max: 0,
					},
					yAxis: {
						type: 'category',
						axisLine: {
							show: true,
							lineStyle: {
								width: 4,
								color: '#F5222D',
							},
						},

						axisTick: {
							show: false,
							alignWithLabel: true,
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							margin: 30,
							alignWithLabel: true,
							show: false,
						},
						data: ['', ...yarr, ''],
					},
					color: ['#333'],
					series: [{
						type: 'line',
						symbolSize: 8,
						itemStyle: {
							color: 'red',
							borderColor: 'red',
							borderWidth: 2,
						},

						hoverAnimation: false,
						legendHoverLink: false,
						data: [linev, ...seriesList, linev],
						lineStyle: {
							color: '#5e7ff5',
						},
					}, ],
				})
			}
		}
	}
</script>
